<template>
	<div class="Header-box">
		<div class="header custom-header">
			<div class="left">
				<NavigationLeft/>
			</div>
			<div class="right">
				<NavigationRight/>
			</div>
		</div>
	</div>

</template>

<script setup>
	import NavigationLeft from './NavigationLeft.vue';
	import NavigationRight from './NavigationRight.vue';
	
	
</script>
<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color:#000;
	}

	.Header-box {
		width: 100%;
		height: 100%;

		.custom-header {
			width: 100%;
			height: 50px;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background-color: rgba(255, 255, 255, 0.5);
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
			border-radius: 10px;
			transition: transform 0.3s ease;
			display: flex;
			
			.left{
				width: 60%;
				height: 50px;
				// background-color: #53ff59;
			}
			.right{
				width: 40%;
				height: 50px;
				// margin-right: 50px;
				display: flex; 
				justify-content: flex-end;
				// background-color: #54fffa;
			}
		}
	}
	
</style>